<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="flexible" content="initial-dpr=2" />
    <title>报价</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/quote.css">
    <link rel="stylesheet" href="css/fabiao_select.css">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <!--<script src="js/quote.js"></script>-->
</head>
<body>
<img src="img/new.png" alt="" class="headlog">
	<div class="content">
        <!--<div class="top">
            <img src="img/logo.png" alt="">
        </div>
        <p class="green">规避加个陷进，立省半年工资</p>
        <div class="butto">
            <span>获取2018人工报价</span>
            <span>获取项目施工报价</span>
            <span>了解常规建材品牌行情</span>
        </div>-->

        <div >
            <div class="forms">
                <div class="shown">
                    <div class="rax">
                        <!--<span id="test" type="text" value="13500" disabled="true" class="test"></span>-->
                        <!--<span id="tubatu_totle" class="tubatu-totle">0</span>-->
                        <div  type="text"  disabled="true" class="test val" />
                            <!--<p id="test"></p>-->
                            <img src="img/radom.gif" alt="" class="radomg">
                        </div>
                    </div>
                </div>
                <div class="cost">
                    <ul>
                        <li>
                            <span>
                                <em>人工费：</em>
                                ？元
                            </span>
                            <span>
                                <em>材料费：</em>
                                ？元
                            </span>
                        </li>
                        <li>
                             <span>
                                <em>设计费：</em>
                                ？元
                            </span>
                            <span>
                                <em>质检费：</em>
                                ？元
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="choose">
                    <ul>
                        <li >
                            <input type="text" placeholder="请输入你所在的城市" readonly id="area" value="">
                            <span class="icon icri"></span>
                        </li>
                        <li>
                            <input type="text" placeholder="请输入你房屋的面积" class="acreage" value="">
                            <span class="icon">㎡</span>
                        </li>
                        <li class="rooms">
                            <div>
                               <span class="shi showa" id="testshi">{$data[0]['room']}</span>
                               <span class="ting showa" id="testting">1厅</span>
                               <span class="wei showa" id="testwei">2卫</span>
                               <span class="yang showa" id="testyangtai">1阳台</span>
                            </div>
                           <!-- <input type="text" placeholder="请选择房屋类型" readonly>-->
                            <span class="icon icri"></span>
                        </li>
                        <li class="choclick" style="background: white">
                            <span class="decoration-type newHouse">新房装修</span>
                            <span class="decoration-type oldHouse selected">旧房翻新</span>
                        </li>
                        <li >
                            <input type="text" placeholder="请输入手机号以获取短信结果" value="" class="teleph">
                        </li>
                        <a class="reseive" href="result.html">免费获取装修报修</a>
                        <p class="last">已有 <span class="people">30</span>人成功获取报价 </p>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</body>
<div class="layer-huxing">
    <div class="layer-content">
        <span class="column">选择你家的户型</span>
        <i class="cut-line"></i>
        <div class="huxing-option">
            <ul class="option0">
                <li class="on">1室</li>
                <li class="">2室</li>
                <li>3室</li>
                <li>4室</li>
                <li>5室</li>
            </ul>
            <ul class="option1">
                <li class="">1厅</li>
                <li class="on">2厅</li>
                <li>3厅</li>
                <li>4厅</li>
                <li>5厅</li>
            </ul>
            <ul class="option2">
                <li class="on">1卫</li>
                <li>2卫</li>
                <li>3卫</li>
                <li>4卫</li>
                <li>5卫</li>
            </ul>
            <ul class="option3">
                <li class="on">1阳台</li>
                <li>2阳台</li>
                <li>3阳台</li>
                <li>4阳台</li>
                <li>5阳台</li>
            </ul>
        </div>
        <input type="button" value="确定" id="confirm" >
    </div>
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/fabiao_select.js"></script>
<script src="js/common_cityFromIp.js"></script>
<script type="text/javascript">
    // window.onload = set_time();
    // function set_time() {
    //     setTimeout(function() {
    //         var rand = parseInt(Math.random() * (x - y + 1) + y);
    //         $("#test").html("").append("<div>" + rand + "</div>");
    //         set_time();
    //     },200)
    // };
    $(function () {

        FabiaoSelect.initialize({targetDom: '#area'});
       /* var search = parseQuery();*/
        $('.decoration-type').on('click',function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            var rommclass =$('.decoration-type.selected').text();
            console.log(rommclass)
        })



        //几室几厅选择
        $(".huxing-option ul li").click(function(){
            $(this).addClass('on').siblings().removeClass('on');
        })
        var city =$("#area").val();

        var acreage =$('.acreage').val();
        var shi =$(".huxing-option .option0 .on").text();
        var ting = $(".huxing-option .option1 .on").text();
        var wei = $(".huxing-option .option2 .on").text();
        var yang = $(".huxing-option .option3 .on").text();
        $('.shi').text(shi);
        $('.ting').text(ting);
        $('.wei').text(wei);
        $('.yang').text(yang)

        $(".rooms").click(function(){
            $(".layer-huxing").show();
        })


            $(".huxing-option .option0 li").click(function(){
                var sh =$(this).text();
                $('.shi').text(sh)
                $('#confirm').click(function(){
                    $(".layer-huxing").hide()
                })
            })
            $(".huxing-option .option1 li").click(function(){
                var ting =$(this).text();
                $('.ting').text(ting)
                $('#confirm').click(function(){
                    $(".layer-huxing").hide()
                })
            })
            $(".huxing-option .option2 li").click(function(){
                var wei =$(this).text();
                $('.wei').text(wei)
                $('#confirm').click(function(){
                    $(".layer-huxing").hide()
                })
            })
            $(".huxing-option .option3 li").click(function(){
                var yang =$(this).text();
                $('.yang').text(yang)
                $('#confirm').click(function(){
                    $(".layer-huxing").hide()
                })
            })
            $('#confirm').click(function(){
                $(".layer-huxing").hide()
                console.log(city)
            })

            $('.reseive').click(function () {

                if($("#area").val() ==''){
                    alert('城市不能为空')
                    return false
                }
                if($('.acreage').val() ==''){
                    alert('面积输入不能为空')
                    return false
                }
                if($('.rooms span').text() ==''){
                    alert('房子类型不能为空')
                    return false
                }
                if($('.teleph').val() ==''){
                    alert('电话号码不能为空')
                    return false
                }
                else{
                    return true
                }
            })
        //
        // $.ajax({
        //     type:"GET",
        //     url:"http://5b7e3e2dadf2070014bfa32a.mockapi.io/v3/texe",//请求业务数据
        //     dataType:"json",
        //     success:function (data) {
        //         console.log(data)
        //         if(data.length > 0){
        //             for(var i=0;i<data.length;i++){
        //                 //拼装业务数据
        //                 var room = data[0]['room']
        //                 $('.shi').text(room)
        //                 console.log(room)
        //                 var str = "<tr><td>"+data[i]["userName"]+"</td><td>"+data[i]["age"]+"</td><td>"+data[i]["address"]+"</td><td><input type='hidden' name='jobs' value='"+data[i]["programLanguage"]+"'/></td><td><input type='hidden' name='category' value='"+data[i]["category"]+"'></td></tr>";
        //                 $('table[name="dynamicTable"]').append(str);//将业务数据渲染到页面上
        //             }
        //         }
        //         // //循环上面业务数据，将code替换成相应的值
        //         // $('input[name="category"]').each(function (i) {
        //         //     $(this).parent("td").append(categorys[$(this).val()]);//替换类别值
        //         //     var job = $('input[name="jobs"]')[i];
        //         //     $(job).parent("td").append(jobs[$(job).val()]);//替换工种
        //         // });
        //     },
        //     error:{
        //     }
        // });

    })



</script>
</html>